<!DOCTYPE html>
<html>
<head>
	<title>vue生命周期</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
	<div id="app">
		{{test}}
	</div>

</body>
<script type="text/javascript">
	//生命周期函数就是vue实例在某一个时间点会自动自行的函数，记住，这些生命周期函数并不放在如methods方法之下，而是与如el,datamethods同级别的函数
	var vm = new Vue({
		el:"#app",
		data:{
			test:"hello world"
		},
		// template:"<div>hello word</div>",
		beforeCreate:function() {  //开始初始化，创建实例前所要执行的函数
			console.log("beforeCreate");
		},
		created:function() { //创建实例完成后要执行的函数
			console.log("created");
		},
		beforeMount:function() { 
			console.log(this.$el);  //验证数据挂载前视图容器情况
			console.log("beforeMount");//数据即将挂载到实例上之前所执行的函数，即渲染前

		},
		mounted:function() {  //渲染后要执行的函数，即此时数据已经挂载
			console.log(this.$el);//验证挂载数据后视图容器的情况
			console.log("mounted");
		},
		beforeDestroy: function() {  //实例的destroy()函数被执行时，在这个销毁函数执行前要执行的函数
			console.log("beforeDstroy");
		},
		destroyed:function() {  //销毁函数执行完成后所要执行的函数
			console.log("destroyed"); 
		},
		beforeUpdate:function() {  //当实例中的数据发生变化时，在重新局部渲染前所执行的函数，如执行vm.test = "菲霞",则在数据改变前便执行beforeUpdate函数
			console.log("beforeUpdata");
		},
		updated:function() {  //数据更新完成后所执行的函数
			console.log("updataed");
		}
	})
	
</script>
</html>